// 异步获取数据
fetch('http://127.0.0.1:5000/movies/by-type')
    .then(response => response.json())
    .then(data => {
        console.log(data); // 打印返回内容
        // 假设返回 {data: [...]}
        const arr = Array.isArray(data.type_stats) ? data.type_stats : [];
        if (!Array.isArray(arr)) {
            throw new Error('返回数据不是数组');
        }
        const chartData = arr.map(item => ({
            name: item.type,
            value: item.count
        }));

        // 初始化ECharts
        var myChart = echarts.init(document.getElementById('container'));
        var option = {
            tooltip: {
                trigger: 'item',
                backgroundColor: '#fff',
                borderColor: '#aaa',
                borderWidth: 1,
                textStyle: {
                    color: '#222',
                    fontWeight: 'bold',
                    fontSize: 16
                },
                extraCssText: 'box-shadow: 0 4px 24px rgba(0,0,0,0.15); border-radius: 10px;',
                formatter: params => {
                    return `
                        <div style="padding:6px 10px;">
                            <span style="display:inline-block;margin-right:8px;width:12px;height:12px;border-radius:50%;background:${params.color};"></span>
                            <span style="font-size:17px;font-weight:bold;">${params.name}</span><br>
                            数量：<span style="color:#1976d2;">${params.value}</span> 部<br>
                            占比：<span style="color:#43a047;">${params.percent}%</span>
                        </div>
                    `;
                }
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                left: 0,
                top: 30,
                itemWidth: 18,
                itemHeight: 14,
                textStyle: {
                    fontSize: 15,
                    color: '#fff'
                }
            },
            series: [
                {
                    name: '类型',
                    type: 'pie',
                    radius: ['45', '100'],
                    center: ['60%', '50%'],
                    data: chartData,
                    label: {
                        show: false,
                        formatter: '{b|{b}}\n{c}部  {d}%',
                        rich: {
                            b: {
                                fontSize: 15,
                                color: '#fff',
                                fontWeight: '300'
                            }
                        }
                    },
                    labelLine: {
                        length: 18,
                        length2: 12,
                        smooth: false
                    },
                    emphasis: {
                        scale: true,
                        scaleSize: 1.08,
                        itemStyle: {
                            shadowBlur: 30,
                            shadowColor: 'rgba(30, 144, 255, 0.3)'
                        },
                        label: {
                            color: '#1976d2',
                            fontWeight: 'bold',
                            fontSize: 17
                        }
                    },
                    animationEasing: 'cubicOut',
                    animationDuration: 900
                }
            ]
        };
        myChart.setOption(option);
        window.addEventListener('resize', function () {
            myChart.resize();
        });
    })
    .catch(error => {
        console.error('获取数据失败:', error);
    });